
<template >

<div id="building"  style=" width: 100%;  height: 100vh; overflow: hidden"  >


  <div style="width: 400px; margin: 150px auto">

<div style="color: azure; font-size:40px; color: black; text-align: center ;margin-bottom: 20px "> 餐厅管理系统</div>
    <div style="color: azure; font-size:30px;color: black; text-align: center  "> 欢迎登陆</div>

    <el-form ref="form" :model="form"  size="normal"  :rules="rules">
      <el-form-item prop="username">
        <el-input v-model="form.username"   placeholder="请输入用户名" prefix-icon="el-icon-user" ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password"  placeholder="请输入密码" prefix-icon="el-icon-key" show-password></el-input>
      </el-form-item>
      <el-form-item label="选择角色" style="background-color:#E8F0FE;border-radius: 20px;padding: 5px">
        <div>
<!--          <el-radio v-model="form.role" label="系统管理员">系统管理员</el-radio>-->
          <el-radio v-model="form.role" label="店长">店长</el-radio>
          <el-radio v-model="form.role" label="店员">店员</el-radio>
          <el-radio v-model="form.role" label="保洁">保洁</el-radio>
          <el-radio v-model="form.role" label="厨师">厨师</el-radio>
          <div style="display: flex ;margin-bottom: 20px">
            <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;" placeholder="请输入验证码">

            </el-input>
            <ValidCode @input="creatValidCode"/></div>
        </div>
      </el-form-item>
      <el-form-item >


      </el-form-item>
      <el-button style="width: 100%" type="primary" @click="login" >登 录</el-button>
      </el-form>
    <el-button style="width: 100%; margin-top: 15px" type="primary"  @click="$router.push('/register')" >注 册</el-button>




</div>



</div>
</template>

<style>
#building{
  background:url("../assets/index.jpg");

position:fixed;
  background-size:100% 100%;}
</style>


<script>
import request from "../utils/request";

import ValidCode from "@/components/ValidCode";

export default {
  name: "Login",
  components:{ValidCode},
  data(){


    return{


      form:{},
      edit:{},
      rules: {
        username:[{required:true , message: "请输入用户名" ,trigger:"blur"

        }],
        password:[ {required:true , message: "请输入密码" ,trigger:"blur"

        }],

      },
    }
  },

  methods: {
//接受验证码组件提交的四位验证码
    creatValidCode(data){
      this.validCode = data
    },
    editPassword() {
      this.dialogVisible = true
      this.edit = {}

    },




    login() {


      this.$refs['form'].validate((valid) => {

      if (valid) {
        if(!this.form.validCode){
          this.$message.error("请填写验证码")
          return
        }
        if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()){
          this.$message.error("验证码错误")
          return
        }
        request.post("/user/login", this.form).then(res => {
          let user = JSON.stringify(res.data)

        // if (res.code === '0'&&this.form.role==="系统管理员") {
        //   this.$router.push("/user")//登录成功后跳转到系统管理员页面
        //   this.$messageBox({
        //    type: "success",
        //    message: "登录成功" })
        //   console.log(this.form.role)
        //   sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
        //   console.log(""+sessionStorage.getItem("user"))
        //
        //
        // }
        //
        //     else
              if(res.code === '0'&&this.form.role==="店长"){
          this.$messageBox({
            type: "success",
            message: "登录成功" })

          sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
          this.$router.push("/goodsManage")//登录成功后跳转到店长页面

        }
            else if(res.code === '0'&&this.form.role==="店员"){
          this.$messageBox({
            type: "success",
            message: "登录成功" })
          sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
          this.$router.push("/showSeat_available_clerk")//登录成功后跳转到系统管理员页面
        }
            else if(res.code === '0'&&this.form.role==="保洁"){
          this.$messageBox({
            type: "success",
            message: "登录成功" })
          sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
          this.$router.push("/ToClean")//登录成功后跳转到系统管理员页面
        }
            else if(res.code === '0'&&this.form.role==="厨师"){
          this.$messageBox({
            type: "success",
            message: "登录成功" })
          sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
          this.$router.push("/orderProcessing")//登录成功后跳转到系统管理员页面
        }
              else {
          this.$messageBox({

            type: "error",
            message: res.msg
          })

        }

      })


      }
    })




    },

  }

}
</script>

<style scoped>

</style>